<!--  -->
<template>
  <div class="fd-nav-content">
    <section class="dingflow-design">
      <div class="fd-nav-right">
        <button type="button" class="ant-btn button-preview" @click="previewImage"><span>导 出</span></button>
        <button type="button" class="ant-btn button-publish" @click="saveWorkFlow"><span>发 布</span></button>
      </div>
      <div class="zoom">
        <div :class="'zoom-out' + (nowVal == 50 ? ' disabled' : '')" @click="zoomSize(1)"></div>
        <span>{{ nowVal }}%</span>
        <div :class="'zoom-in' + (nowVal == 300 ? ' disabled' : '')" @click="zoomSize(2)"></div>
      </div>
      <div class="box-scale" id="box-scale" :style="'transform: scale(' + nowVal / 100 + '); transform-origin: 50% 0px 0px;'">
        <nodeWrap id="capture" :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission" :isTried.sync="isTried" :directorMaxLevel="directorMaxLevel" :tableId="tableId" :info-data="infoData"></nodeWrap>
        <div class="end-node">
          <div class="end-node-circle"></div>
          <div class="end-node-text">流程结束</div>
        </div>
      </div>
      <star-pic-list :isShow="isDialogShow" @hide-preview="hidePreview" :data="imgUrl" />
    </section>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas';
  import starPicList from './preview';
  import { processSaveWorkFlow, processUpdate } from '../../api/process';
  import { Loading } from 'element-ui';
  export default {
    props: ['nodeConfig', 'flowPermission', 'directorMaxLevel', 'tableId', 'isTried', 'isFlag', 'infoData'],
    name: 'flow',
    components: {
      starPicList,
    },
    data() {
      return {
        nowVal: 100,
        imgUrl: '',
        isDialogShow: false,
      };
    },
    methods: {
      zoomSize(type) {
        if (type == 1) {
          if (this.nowVal == 50) {
            return;
          }
          this.nowVal -= 10;
        } else {
          if (this.nowVal == 300) {
            return;
          }
          this.nowVal += 10;
        }
      },
      async saveWorkFlow(data) {
        if (this.isPost) {
          this.$message({
            message: '请勿重复提交!',
            type: 'warning',
          });

          return false;
        }

        this.isPost = true;

        setTimeout(() => {
          this.isPost = false;
        }, 3000);

        let param = this.nodeConfig;
        const res = this.isFlag ? await processUpdate(param) : await processSaveWorkFlow(param);

        if (res.success) {
          this.$message.success(res.message);
          // this.$router.replace({
          //   path: this.$route.path,
          //   query: this.$route.query
          // });
        } else {
          this.$message.error(res.message);
        }
      },
      previewImage() {
        let loadingInstance = Loading.service({
          text: '生成中...',
        });

        html2canvas(document.querySelector('.box-scale')).then(
          canvas => {
            this.imgUrl = canvas.toDataURL();
            loadingInstance.close();
            this.isDialogShow = true;
          },
          { dpi: 1000 },
        );
      },
      hidePreview(e) {
        this.isDialogShow = !this.isDialogShow;
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import '../../../../common/css/workflow.css';
  .dingflow-design {
    #box-scale {
      margin-top: 50px;
    }
  }
  .error-modal-list {
    width: 455px;
  }
  .fd-nav-right {
    display: flex;
    position: fixed;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
    width: 125px;
    right: 200px;
    margin-top: 30px;
    z-index: 10;
  }
  .ant-btn {
    margin-right: 10px;
  }
</style>
